<template>
    <popup
            v-model="popup.visible"
            :width="width"
            :height="height"
            :position="position"
            should-scroll-top-on-show
            @on-show="_onOpen"
            @on-hide="_onClose"
            @on-first-show="_onFirstOpen"
    >
        <div class="popup">
            <div class="header">
                <slot name="header"></slot>
            </div>
            <div class="content vux-scrollable">
                <slot></slot>
            </div>
            <div class="footer">
                <slot name="footer"></slot>
            </div>
        </div>
    </popup>
</template>

<script>
    import {Popup} from 'vux';

    export default {
        name: 'PopupView',
        components: {
            Popup
        },
        props: {
            width: {
                type: String,
                default: '62%'
            },
            height: {
                type: String,
                default: '62%'
            },
            position: {
                type: String,
                default: 'bottom'
            },
            onOpen: {
                type: Function
            },
            onClose: {
                type: Function
            },
            onFirstOpen: {
                type: Function
            }
        },

        data() {
            return {
                popup: {
                    visible: false,
                    loading: false
                }
            };
        }, // data()

        methods: {
            open() {
                this.popup.visible = true;
            },

            close() {
                this.popup.visible = false;
            },

            _onOpen() {
                if (typeof this.onOpen === 'function') {
                    this.onOpen();
                }
            },

            _onClose() {
                if (typeof this.onClose === 'function') {
                    this.onClose();
                }
            },

            _onFirstOpen() {
                if (typeof this.onFirstOpen === 'function') {
                    this.onFirstOpen();
                }
            }
        }
    };
</script>

<style lang="less" scoped>
    .popup {
        height: 100%;
        display: flex;
        flex-direction: column;

        .content {
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
</style>
